<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,
        body {
            height: 100%;
        }
        body {
            background-color: #1b2b34;
            font-family: "Lucida Grande", sans-serif;
            font-size: 14px;
            color: #65737e;
            text-align: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }
        .center {
            margin: auto;
        }
        .console {
            color: #cdd3de;
            font-family: "Lucida Console", Monaco, monospace;
        }
        .gray {
            color: #1b2b34;
        }
        .red {
            color: #ec5f67;
        }
        .orange {
            color: #f99157;
        }
        .yellow {
            color: #fac863;
        }
        .green {
            color: #99c794;
        }
        .teal {
            color: #5fb3b3;
        }
        .blue {
            color: #69c;
        }
        .purple {
            color: #c594c5;
        }
        .brown {
            color: #ab7967;
        }
    </style>
</head>
<body>
<div class="center">
    <h1 class="console">console.log(<span class="red">R</span><span class="orange">O</span><span class="yellow">Y</span><span class="green">G</span><span class="teal">T</span><span class="blue">B</span><span class="purple">P</span>);</h1>
    <p>Open the console for colorful logs</p>
</div>
</body>
</html>

<script>
    // Styles and Colors
    var colors = {
        "gray": "font-weight: bold; color: #1B2B34;",
        "red": "font-weight: bold; color: #EC5f67;",
        "orange": "font-weight: bold; color: #F99157;",
        "yellow": "font-weight: bold; color: #FAC863;",
        "green": "font-weight: bold; color: #99C794;",
        "teal": "font-weight: bold; color: #5FB3B3;",
        "blue": "font-weight: bold; color: #6699CC;",
        "purple": "font-weight: bold; color: #C594C5;",
        "brown": "font-weight: bold; color: #AB7967;"
    }
    // All the colors
    console.log('%cHello', colors.gray);
    console.log('%cHello', colors.red);
    console.log('%cHello', colors.orange);
    console.log('%cHello', colors.yellow);
    console.log('%cHello', colors.teal);
    console.log('%cHello', colors.blue);
    console.log('%cHello', colors.purple);
    console.log('%cHello', colors.brown);
    // Log with multiple colors
    console.log('%cGray %cRed %cOrange %cYellow %cGreen %cTeal %cBlue %cPurple %cBrown', colors.gray, colors.red, colors.orange, colors.yellow, colors.green, colors.teal, colors.blue, colors.purple, colors.brown);
    // Log that's partially colored and the rest is default styling
    console.log('%cWarning: %cThe cake is a lie', colors.red, '');
</script>